<template>
  <div :class="{ 'split-pane': true, 'is-dragging': dragging }" @mousemove="dragMove" @mouseleave="dragEnd"
    @mouseup="dragEnd">
    <div class="split-pane-item-left" :style="{ width: left + 'px' }">
      <slot name="left"></slot>
    </div>
    <div class="split-pane-gutter" @mousedown="dragStart"></div>
    <div class="split-pane-item-right">
      <div class="right-inner">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  left: {
    type: String,
  },
  leftWidth: {
    type: Number,
    default: 240
  }
})
const left = ref(props.leftWidth)
const dragging = ref(false)
const startX = ref(0)
const startSplit = ref(0)

const dragStart = (e: any) => {
  dragging.value = true
  startX.value = e.pageX
  startSplit.value = left.value || props.leftWidth
}

const dragMove = (e: any) => {
  if (dragging.value) {
    const deltaX = e.pageX - startX.value
    left.value = startSplit.value + deltaX
  }
}

const dragEnd = () => {
  dragging.value = false
}
</script>


<style scoped lang="scss">
.split-pane {
  display: flex;
  flex-direction: row;
  height: 100%;

  &.is-dragging {
    user-select: none;
    cursor: col-resize;
  }

  &:hover {
    .split-pane-gutter:before {
      position: absolute;
      top: 38%;
      width: 17px;
      height: 20px;
      margin-left: -8.2px;
      content: '';
      background: url(./drag.svg) center center;
      background-size: 100% 100%;
    }
  }

  .split-pane-gutter {
    background: #ccc;
    opacity: 0.2;
    z-index: 1;
    box-sizing: border-box;
    background-clip: padding-box;
    width: 11px;
    margin: 0 5px;
    border-left: 5px solid rgba(255, 255, 255, 0);
    border-right: 5px solid rgba(255, 255, 255, 0);
    cursor: col-resize;

    &:hover,
    &:focus {
      border-left: 5px solid rgba(0, 0, 0, 0.5);
      border-right: 5px solid rgba(0, 0, 0, 0.5);
      transition: all 2s ease;
    }
  }

  .split-pane-item-right {
    flex: 1 1 auto;
    width: 0;
    height: 100%;

    .right-inner {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
}
</style>
